import React from 'react';
import PropTypes from 'prop-types';

import { Text, TouchableOpacity, View } from 'react-native';

function Tab({
  text,
  event,
  isActive,
  selectedTabStyle,
  selectedTextStyle,
  defaultTabStyle,
  defaultTextStyle,
  children,
}) {
  return (
    <TouchableOpacity
      onPress={event}
      style={[
        { height: '100%', alignItems: 'center', justifyContent: 'center' },
        isActive ? selectedTabStyle : defaultTabStyle,
      ]}
    >
      {children}
      <Text style={isActive ? selectedTextStyle : defaultTextStyle}>
        {text}
      </Text>
    </TouchableOpacity>
  );
}

Tab.propTypes = {
  text: PropTypes.string.isRequired,
  event: PropTypes.func.isRequired,
  isActive: PropTypes.bool.isRequired,
  selectedTabStyle: View.propTypes.style,
  defaultTabStyle: View.propTypes.style,
  defaultTextStyle: Text.propTypes.style,
  selectedTextStyle: Text.propTypes.style,
  children: PropTypes.element,
};

Tab.defaultProps = {
  selectedTabStyle: {},
  selectedTextStyle: {},
  defaultTabStyle: {},
  defaultTextStyle: {},
  children: null,
};

export { Tab };
